<!doctype html>

<html>

<head>
    <title>Tempranillo</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
</head>

<body>

<header>
    <h1>Tempranillo form validator</h1>
</header>

<article>
	<p>
		This is a prototype of the Tempranillo form validator. The
		validator uses AJAX to validate each field on change and the
		whole form upon submit.
	</p>
</article>

<section id="body">
	<div id="t_notification">
		<h2>Error</h2>
		<p>
			This notification box contains a message that there is an
			error and that the user has to look at a certain input.
		</p>
	</div>

	<form id="contact" class="tempranillo" method="post" action="<?=site_url('contact')?>">
		<fieldset>
			<legend>Form</legend>
			<ol>
				<li>
					<label for="name">Name</label>
					<input type="text" name="name" required />
					<div class="hidden status valid" id="valid_contact_name"></div>
					<div class="hidden error" id="error_contact_name"></div>
				</li>
				<li>
					<label for="email_address">E-mail address</label>
					<input type="email" name="email_address" required />
					<div class="hidden status valid" id="valid_contact_email_address"></div>
					<div class="hidden error" id="error_contact_email_address"></div>
				</li>
				<li><input type="submit" value="Send" /></li>
			</ol>
		</fieldset>
	</form>
</section>

<footer>
    <p>Form validation system for CI and jQuery.</p>
</footer>

<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.tempranillo.js"></script>
<script src="js/init.js"></script>

</body>
</html>